<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<!-- Basic Page Needs
  ================================================== -->
<meta charset="utf-8">
<title>zFanVideo | Free Video Html5 Templates</title>
<meta name="description"
	content="Free Responsive Html5 Css3 Templates | zerotheme.com">
<meta name="author" content="www.zerotheme.com">

<!-- Mobile Specific Metas
  ================================================== -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- CSS
  ================================================== -->
<link rel="stylesheet" href="/css/zerogrid.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/menu.css">
<!-- Owl Carousel Assets -->
<link href="/css/owl.carousel.css" rel="stylesheet">
<link href="/css/owl.theme.css" rel="stylesheet">
<link href="/css/danmu.css" rel="stylesheet">
<link href="/css/scojs.css" rel="stylesheet">
  <link href="/css/colpick.css" rel="stylesheet">
  <link href="/css/bootstrap.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/main.css">
<!-- Custom Fonts -->
<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet"
	type="text/css">
<script src="/js/jquery-1.8.3.min.js"></script>
<script src="/js/ajax.js"></script>
<script src="/js/danmu.js"></script>
<script src="/js/hot.js"></script>
<script src="/js/FG_js/gallery.js"></script>
<script type="text/javascript">
	
</script>
<!--[if lt IE 8]>
       <div style=' clear: both; text-align:center; position: relative;'>
         <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
           <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
        </a>
      </div>
    <![endif]-->
<!--[if lt IE 9]>
		<script src="js/html5.js"></script>
		<script src="js/css3-mediaqueries.js"></script>
	<![endif]-->
<link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="http://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>

<script>
	videojs.options.flash.swf = "video-js.swf";
</script>
<style type="text/css">
#example_video_1 {
	
}
</style>


<script type="text/javascript">
	var myPlayer = videojs('example_video_1');

	videojs("example_video_1").ready(function() {
		var myPlayer = this;
		myPlayer.play();
	});
</script>
</head>
<body id="wrapper">
	<div class="wrap-body">

		<!--////////////////////////////////////Header-->
		<header>
		<div class="wrap-header">
			<div class="zerogrid">
				<div class="row">
					<a href="index.html" class="logo"><img src="/images/logo.png" /></a>
					<ul class="quick-link">
						<li><a href="#" title="Upload Video"><i
								class="fa fa-upload"></i></a></li>
						<li><a href="/jsp/FG/Login.jsp" title="Login"><i
								class="fa fa-user"></i></a></li>
						<li><a href="#" title="Warning"><i class="fa fa-bell"></i></a></li>
					</ul>
					<ul class="social">
						<li><a href="#"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
						<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
						<li><a href="#"><i class="fa fa-instagram"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="zerogrid">
				<div class="row">
					<span>Welcome to Us - Contact Us at <a href="contact.html">HERE</a></span>
				</div>
			</div>
		</div>
		</header>
		<!--////////////////////////////////////Menu-->
		<a href="#" class="nav-toggle">Toggle Navigation</a>
		<nav class="cmn-tile-nav">
		<ul class="clearfix">
			<li class="colour-1"><a href="gallery.html">Top News</a></li>
			<li class="colour-2"><a href="gallery.html">Sport</a></li>
			<li class="colour-3"><a href="gallery.html">Music</a></li>
			<li class="colour-4"><a href="gallery.html">TV Show</a></li>
			<li class="colour-5"><a href="gallery.html">Cartoons</a></li>
			<li class="colour-6"><a href="gallery.html">Tech</a></li>
			<li class="colour-7"><a href="gallery.html">iOS</a></li>
			<li class="colour-8"><a href="gallery.html">More</a></li>
		</ul>
		</nav>
		<!--////////////////////////////////////Container-->
		<section id="container" class="index-page">
		<div class="wrap-container zerogrid">
			<div class="row">
				<div id="main-content" class="col-2-3">
					<div class="wrap-vid">
						<!-- 播放器代码 -->
						<input type="text" id="userid" style="display: none" value="111">
						<input type="text" id="videoid" style="display: none" value="4">
						<div id="danmup"
							style="left: 50%; margin-left: -400px; top: 100px"></div>
						<div style="display: none">
							<span class="glyphicon" aria-hidden="true">&#xe072</span> <span
								class="glyphicon" aria-hidden="true">&#xe073</span> <span
								class="glyphicon" aria-hidden="true">&#xe242</span> <span
								class="glyphicon" aria-hidden="true">&#xe115</span> <span
								class="glyphicon" aria-hidden="true">&#xe111</span> <span
								class="glyphicon" aria-hidden="true">&#xe096</span> <span
								class="glyphicon" aria-hidden="true">&#xe097</span>
						</div>


					</div>
					<div class="row">
						<div class="share">
							<div class="col-1-4">
								<div class="wrap-col">
									<div class="box-share">
										<a href="#"> <i class="fa fa-comments"></i> <span>Comments</span>
										</a>
									</div>
								</div>
							</div>
							<div class="col-1-4">
								<div class="wrap-col">
									<div class="box-share">
										<a href="#"> <i class="fa fa-twitter"></i> <span>Twitter
										</span>
										</a>
									</div>
								</div>
							</div>
							<div class="col-1-4">
								<div class="wrap-col">
									<div class="box-share">
										<i id="hhh" class="fa fa-thumbs-up"></i> <span id="hot">110</span>

									</div>
								</div>
							</div>
							<div class="col-1-4">
								<div class="wrap-col">
									<div class="box-share">
										<a href="#"> <i class="fa fa-plus"></i> <span>Add</span>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>

					<h1 class="vid-name">${videoname}</h1>
					<input type="text" id="videoid" style="display: none"
						value="${videoid}"> <input type="text" id="userid"
						style="display: none" value="${sessionScope.usermessage.userid}">



					<div class="info">
						<h5>
							By <a href="#">Kelvin</a>
						</h5>
						<span><i class="fa fa-calendar"></i>25/3/2015</span> <span><i
							class="fa fa-heart"></i>1,200</span>
					</div>
					<p>Aenean feugiat in ante et blandit. Vestibulum posuere
						molestie risus, ac interdum magna porta non. Pellentesque rutrum
						fringilla elementum. Curabitur tincidunt porta lorem vitae
						accumsan. Pellentesque habitant morbi tristique senectus et netus
						et malesuada fames ac turpis egestas. Donec ac euismod turpis.</p>
					<div class="tags">
						<a href="#">Animal</a> <a href="#">Aenean</a> <a href="#">Feugiat</a>
						<a href="#">Risus</a> <a href="#">Magna</a>
					</div>
					<section class="vid-related">
					<div class="header">
						<h2>Related</h2>
					</div>
					<div class="row">
						<!--Start Box-->
						<div id="owl-demo-1" class="owl-carousel">
							<div class="item wrap-vid">
								<div class="zoom-container">
									<a href="single.html"> <span class="zoom-caption"> <i
											class="icon-play fa fa-play"></i>
									</span> <img src="/images/1.jpg" />
									</a>
								</div>
								<h3 class="vid-name">
									<a href="#">Video's Name</a>
								</h3>
								<div class="info">
									<h5>
										By <a href="#">Kelvin</a>
									</h5>
									<span><i class="fa fa-calendar"></i>25/3/2015</span> <span><i
										class="fa fa-heart"></i>1,200</span>
								</div>
							</div>
							<div class="item wrap-vid">
								<div class="zoom-container">
									<a href="single.html"> <span class="zoom-caption"> <i
											class="icon-play fa fa-play"></i>
									</span> <img src="/images/2.jpg" />
									</a>
								</div>
								<h3 class="vid-name">
									<a href="#">Video's Name</a>
								</h3>
								<div class="info">
									<h5>
										By <a href="#">Kelvin</a>
									</h5>
									<span><i class="fa fa-calendar"></i>25/3/2015</span> <span><i
										class="fa fa-heart"></i>1,200</span>
								</div>
							</div>
							<div class="item wrap-vid">
								<div class="zoom-container">
									<a href="single.html"> <span class="zoom-caption"> <i
											class="icon-play fa fa-play"></i>
									</span> <img src="/images/3.jpg" />
									</a>
								</div>
								<h3 class="vid-name">
									<a href="#">Video's Name</a>
								</h3>
								<div class="info">
									<h5>
										By <a href="#">Kelvin</a>
									</h5>
									<span><i class="fa fa-calendar"></i>25/3/2015</span> <span><i
										class="fa fa-heart"></i>1,200</span>
								</div>
							</div>
							<div class="item wrap-vid">
								<div class="zoom-container">
									<a href="single.html"> <span class="zoom-caption"> <i
											class="icon-play fa fa-play"></i>
									</span> <img src="/images/4.jpg" />
									</a>
								</div>
								<h3 class="vid-name">
									<a href="#">Video's Name</a>
								</h3>
								<div class="info">
									<h5>
										By <a href="#">Kelvin</a>
									</h5>
									<span><i class="fa fa-calendar"></i>25/3/2015</span> <span><i
										class="fa fa-heart"></i>1,200</span>
								</div>
							</div>
							<div class="item wrap-vid">
								<div class="zoom-container">
									<a href="single.html"> <span class="zoom-caption"> <i
											class="icon-play fa fa-play"></i>
									</span> <img src="/images/5.jpg" />
									</a>
								</div>
								<h3 class="vid-name">
									<a href="#">Video's Name</a>
								</h3>
								<div class="info">
									<h5>
										By <a href="#">Kelvin</a>
									</h5>
									<span><i class="fa fa-calendar"></i>25/3/2015</span> <span><i
										class="fa fa-heart"></i>1,200</span>
								</div>
							</div>
							<div class="item wrap-vid">
								<div class="zoom-container">
									<a href="single.html"> <span class="zoom-caption"> <i
											class="icon-play fa fa-play"></i>
									</span> <img src="/images/14.jpg" />
									</a>
								</div>
								<h3 class="vid-name">
									<a href="#">Video's Name</a>
								</h3>
								<div class="info">
									<h5>
										By <a href="#">Kelvin</a>
									</h5>
									<span><i class="fa fa-calendar"></i>25/3/2015</span> <span><i
										class="fa fa-heart"></i>1,200</span>
								</div>
							</div>
							<div class="item wrap-vid">
								<div class="zoom-container">
									<a href="single.html"> <span class="zoom-caption"> <i
											class="icon-play fa fa-play"></i>
									</span> <img src="/images/3.jpg" />
									</a>
								</div>
								<h3 class="vid-name">
									<a href="#">Video's Name</a>
								</h3>
								<div class="info">
									<h5>
										By <a href="#">Kelvin</a>
									</h5>
									<span><i class="fa fa-calendar"></i>25/3/2015</span> <span><i
										class="fa fa-heart"></i>1,200</span>
								</div>
							</div>
							<div class="item wrap-vid">
								<div class="zoom-container">
									<a href="single.html"> <span class="zoom-caption"> <i
											class="icon-play fa fa-play"></i>
									</span> <img src="/images/5.jpg" />
									</a>
								</div>
								<h3 class="vid-name">
									<a href="#">Video's Name</a>
								</h3>
								<div class="info">
									<h5>
										By <a href="#">Kelvin</a>
									</h5>
									<span><i class="fa fa-calendar"></i>25/3/2015</span> <span><i
										class="fa fa-heart"></i>1,200</span>
								</div>
							</div>
						</div>
					</div>
					</section>
				</div>
				<div id="sidebar" class="col-1-3">
					<form id="form-container" action="">
						<!--<input type="submit" id="searchsubmit" value="" />-->
						<a class="search-submit-button" href="javascript:void(0)"> <i
							class="fa fa-search"></i>
						</a>
						<div id="searchtext">
							<input type="text" id="s" name="s"
								placeholder="Search Something...">
						</div>
					</form>
					<!---- Start Widget ---->
					<div class="widget wid-post">
						<div class="wid-header">
							<h5>Latest Posts</h5>
						</div>
						<div class="wid-content" id="LatestPosts">
							
							
						
						</div>
					</div>
					<!---- Start Widget ---->
					<div class="widget wid-news">
						<div class="wid-header">
							<h5>Top News</h5>
						</div>
						<div class="wid-content" id="Mostheat">
							
						
				
						</div>
					</div>
				</div>
			</div>
		</div>
		</section>

		<!--////////////////////////////////////Footer-->
		<footer>
		<div class="zerogrid top-footer">
			<div class="row">
				<div class="col-1-5">
					<a href="#"><img src="/images/15.jpg" /></a>
				</div>
				<div class="col-1-5">
					<a href="#"><img src="/images/16.jpg" /></a>
				</div>
				<div class="col-1-5">
					<a href="#"><img src="/images/17.jpg" /></a>
				</div>
				<div class="col-1-5">
					<a href="#"><img src="/images/18.jpg" /></a>
				</div>
				<div class="col-1-5">
					<a href="#"><img src="/images/19.jpg" /></a>
				</div>
			</div>
		</div>
		<div class="zerogrid wrap-footer">
			<div class="row">
				<div class="col-1-4 col-footer-1">
					<div class="wrap-col">
						<a href="index.html" class="logo"><img src="images/logo.png" /></a>
						<p>Ut volutpat consectetur aliquam. Curabitur auctor in nis
							ulum ornare. Sed consequat, augue condimentum fermentum gravida,
							metus elit vehicula dui.</p>
					</div>
				</div>
				<div class="col-1-4 col-footer-2">
					<div class="wrap-col">
						<h3>Categories</h3>
						<ul>
							<li><a href="#">Action</a></li>
							<li><a href="#">Romantic</a></li>
							<li><a href="#">Cartoon</a></li>
							<li><a href="#">Zombies</a></li>
						</ul>
					</div>
				</div>
				<div class="col-1-4 col-footer-3">
					<div class="wrap-col">
						<h3>Recent Posts</h3>
						<ul>
							<li><a href="#">New Videos</a></li>
							<li><a href="#">Featured Videos</a></li>
							<li><a href="#">Most Viewed Videos</a></li>
							<li><a href="#">Sports Videos</a></li>
						</ul>
					</div>
				</div>
				<div class="col-1-4 col-footer-4">
					<div class="wrap-col">
						<h3>Flickr Photos</h3>
						<div class="row">
							<div class="col-1-4">
								<div class="wrap-col">
									<a href="#"><img src="/images/6.jpg" /></a> <a href="#"><img
										src="/images/10.jpg" /></a> <a href="#"><img
										src="/images/13.jpg" /></a>
								</div>
							</div>
							<div class="col-1-4">
								<div class="wrap-col">
									<a href="#"><img src="/images/7.jpg" /></a> <a href="#"><img
										src="/images/11.jpg" /></a> <a href="#"><img
										src="/images/6.jpg" /></a>
								</div>
							</div>
							<div class="col-1-4">
								<div class="wrap-col">
									<a href="#"><img src="/images/8.jpg" /></a> <a href="#"><img
										src="/images/12.jpg" /></a> <a href="#"><img
										src="/images/10.jpg" /></a>
								</div>
							</div>
							<div class="col-1-4">
								<div class="wrap-col">
									<a href="#"><img src="/images/9.jpg" /></a> <a href="#"><img
										src="/images/13.jpg" /></a> <a href="#"><img
										src="/images/8.jpg" /></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="zerogrid copyright">
			<div class="wrapper">
				Copyright 2015 - More Templates <a href="http://www.cssmoban.com/"
					target="_blank" title="模板之家">模板之家</a> - Collect from <a
					href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
				<ul class="quick-link f-right">
					<li><a href="#">Privacy Policy</a></li>
					<li><a href="#">Terms of Use</a></li>
				</ul>
			</div>
		</div>
		</footer>

		<!-- Slider -->
		<script src="/js/jquery-2.1.1.js"></script>
		<script src="/js/demo.js"></script>
		<!-- Search -->
		<script src="/js/modernizr.custom.js"></script>
		<script src="/js/classie.js"></script>
		<script src="/js/uisearch.js"></script>
		<script>
			new UISearch(document.getElementById('sb-search'));
		</script>
		<!-- Carousel -->
		<script src="js/owl.carousel.js"></script>
		<script>
			$(document).ready(function() {

				$("#owl-demo-1").owlCarousel({
					items : 4,
					lazyLoad : true,
					navigation : true
				});
				$("#owl-demo-2").owlCarousel({
					items : 4,
					lazyLoad : true,
					navigation : true
				});

			});
		</script>
	</div>
</body>
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/jquery.shCircleLoader.js"></script>
<script src="/js/sco.tooltip.js"></script>
<script src="/js/colpick.js"></script>
<script src="/js/jquery.danmu.js"></script>
<script src="/js/main.js"></script>
<!--<script src="../dist/js/danmuplayer.min.js"></script>-->
<script>
  $("#danmup").DanmuPlayer({
    src:"https://pawrl25jn.bkt.clouddn.com/${videoname}.mp4",
    height: "480px", //区域的高度
    width: "800px" //区域的宽度
    ,urlToGetDanmu:"/DanmuTest/show.do"//从后台取弹幕
    ,urlToPostDanmu:"/DanmuTest/save.do"//发送弹幕到后台
  });

  $("#danmup .danmu-div").danmu("addDanmu",[
    { "text":"这是滚动弹幕" ,color:"white",size:1,position:0,time:2}
    ,{ "text":"我是帽子绿" ,color:"green",size:1,position:0,time:3}
    ,{ "text":"哈哈哈啊哈" ,color:"black",size:1,position:0,time:10}
    ,{ "text":"这是顶部弹幕" ,color:"yellow" ,size:1,position:1,time:3}
    ,{ "text":"这是底部弹幕" , color:"red" ,size:1,position:2,time:9}
    ,{ "text":"大家好，我是伊藤橙" ,color:"orange",size:1,position:1,time:3}

  ])
</script>
</html>